<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Aimate的使用以及Animate库的使用,以及transition过渡动画和keyframes形式的animated动画联立使用</title>
		<!-- keyframs形式的动画 -->
		<link href="css/animate.css" rel="stylesheet" type="text/css" />
		
		<!-- 过渡形式enter、leave的动画 -->
		<style>
			.header-leave-to,
			.header-enter{
				opacity: 0;
			}
			
			.header-leave-active,
			.header-enter-active{
				transition: opacity 3s;
			}
			
			@keyframes bounce{
				from{}
				to{}
			}
			
		</style>
	</head>
	
	<body>
		<div id="cartoon">
			<!-- 可以自定义leave-active和enter-active类的名字 -->
			<transition
				:duration="{enter:5000,leave:10000}"
				name="header"
				appear
				leave-active-class="animated wobble header-leave-active"
				enter-active-class="animated wobble header-enter-active"
				appear-active-class="animated wobble header-leave-active">
				<div v-show="show"><h1>hello world</h1></div>
			</transition>
			<button @click="handleClick">切换</button>
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			let vm = new Vue({
				el:'#cartoon',
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show = !this.show
					}
				}
			})
		</script>
	</body>
</html>
